<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="icon" href="image/public/Logo.ico">
    <link rel="stylesheet" href="css/public.css">
    <link rel="stylesheet" href="css/bottom.css">
    <link rel="stylesheet" href="css/title.css">
    <link rel="stylesheet" href="element/index.css">
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <script src="bootstrap/js/bootstrap.bundle.min.js"></script>
    <script src="jquery/jquery-3.6.0.js"></script>
    <script src="vue/vue.min.js"></script>
    <script src="element/index.js"></script>
    <script src="axios/axios.min.js"></script>
    <script src="js/iconfont.js"></script>
</head>
<body>
<div id="app">
    <div class="title">
        <div class="title_item_box">
            <div class="logo_img"></div>
            <div class="operation_box">
                <ul class="ul_css">
                    <li class="operation_li">
                        <a href="#" class="a_text_all">我的账户</a>
                        <span class="operation_span">|</span>
                    </li>
                    <li class="operation_li">
                        <a href="#" class="a_text_all">退出</a>
                        <span class="operation_span">|</span>
                    </li>
                    <li class="operation_li" id="language_text">
                        <a href="#" class="a_text_all">Language</a>
                        <span class="operation_span">|</span>
                    </li>
                    <li class="operation_li" id="currency_text">
                        <a href="#" class="a_text_all">CNY</a>
                        <span class="operation_span">|</span>
                    </li>
                    <li class="operation_li">
                        <a href="#" class="a_text_all">常见问题</a>
                        <svg class="icon" aria-hidden="true" style="position: relative;top: -3px;">
                            <use xlink:href="#icon-daosanjiao"></use>
                        </svg>
                        <span class="operation_span">|</span>
                    </li>
                    <li class="operation_li" id="pc_text">
                        <img src="image/head/phone-white.svg" width="13" style="vertical-align: baseline; position: relative;top: 2px;">
                        <a href="#" class="a_text_all">APP客户端</a>
                        <span class="operation_span">|</span>
                    </li>
                    <li class="operation_li">
                        <img src="image/head/phone.svg" width="15" style="vertical-align: baseline; position: relative;top: 2px;">
                        <a href="#" class="a_text_all" style="color:#ff8000; font-style: oblique;font-size: 14px;">400-9600-080</a>
                    </li>
                </ul>
                <ul class="ul2 ul_css">
                    <li><a href="#" class="a_text_all">English</a></li>
                    <li><a href="#" class="a_text_all">繁體中文</a></li>
                    <li><a href="#" class="a_text_all">简体中文</a></li>
                    <li style="border: 0;"><a href="#" class="a_text_all">日本语</a></li>
                </ul>
                <ul class="ul3 ul_css">
                    <li><a href="#" class="a_text_all">CNY</a></li>
                    <li><a href="#" class="a_text_all">USD</a></li>
                    <li><a href="#" class="a_text_all">HKD</a></li>
                    <li style="border: 0;"><a href="#" class="a_text_all">JPY</a></li>
                </ul>
                <div class="ul4 ul_css">
                    <div class="download-1">APP预订，即时简单快捷</div>
                    <div class="img" ></div>
                </div>
            </div>
            <div class="nav_box">
                <ul class="ul_css">
                    <li class="nav_li">
                        <a href="" class="a_text_all">首页</a>
                    </li>
                    <li class="nav_li" id="nav_villa">
                        <a href="#" class="a_text_all" id="a_villa">别墅公寓</a>
                        <svg class="icon" aria-hidden="true" style="position: relative;top: -3px;">
                            <use xlink:href="#icon-daosanjiao"></use>
                        </svg>
                    </li>
                    <li class="nav_li">
                        <a href="" class="a_text_all">甄选酒店</a>
                    </li>
                    <li class="nav_li">
                        <span class="new"></span>
                        <a href="" class="a_text_all">私享小团</a>
                    </li>
                    <li class="nav_li">
                        <a href="" class="a_text_all">限时特惠</a>
                    </li>
                    <li class="nav_li">
                        <a href="" class="a_text_all">晒单</a>
                    </li>
                    <li class="nav_li">
                        <a href="" class="a_text_all">度假攻略</a>
                    </li>
                    <li class="nav_li">
                        <a href="" class="a_text_all">VVIP</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <!--    -->
    <div id="carouselExampleFade" class="carousel slide carousel-fade" data-bs-ride="carousel">
        <div class="carousel-inner" style="height: 569px;">
            <div class="carousel-item active" data-bs-interval="20000">
                <video id="sl-video" class="banner-video1" width="100%" height="100%" muted=""
                       controls="false" autoplay="" slot="body" loop="loop"
                       src="image/home_page/video/sl_video.mp4">
                    您的浏览器不支持 video 标签。
                </video>
                <div class="carousel-caption d-none d-md-block" style="padding: 70px 130px;">
                    <div class="look_video">查看完整视频</div>
                </div>
            </div>
            <div class="carousel-item" data-bs-interval="10000">
                <img src="image/home_page/rotation/rotation-2.jpg" class="d-block w-100" alt="...">
                <div class="carousel-caption d-none d-md-block" style="padding: 70px 130px">
                    <h1 style="text-shadow: 0px 1px 3px black;color: #fff;text-align: left;width: 100%;">苏梅岛 萨穆嘉纳30号别墅</h1>
                    <p style="text-shadow: 0px 1px 3px black;font-size: 24px; color: #fff;text-align: left;">极致的海景，苏梅明星别墅</p>
                </div>
            </div>
            <div class="carousel-item" data-bs-interval="8000">
                <img src="image/home_page/rotation/rotation-3.jpg" class="d-block w-100" alt="...">
                <div class="carousel-caption d-none d-md-block" style="padding: 70px 130px;">
                    <h1 style="text-shadow: 0px 1px 3px black;color: #fff;text-align: left;width: 100%;">甘南诺尔丹营地</h1>
                    <p style="text-shadow: 0px 1px 3px black;font-size: 24px; color: #fff;text-align: left;">藏地绝美的孤独浪漫</p>
                </div>
            </div>
            <div class="carousel-item" data-bs-interval="8000">
                <img src="image/home_page/rotation/rotation-4.jpg" class="d-block w-100" alt="...">
                <div class="carousel-caption d-none d-md-block" style="padding: 70px 130px">
                    <h1 style="text-shadow: 0px 1px 3px black;color: #fff;text-align: left;width: 100%;">Club Med Joyview 千岛湖度假村</h1>
                    <p style="text-shadow: 0px 1px 3px black;font-size: 24px; color: #fff;text-align: left;">住进大自然的博物馆，6月16日即将全新开幕</p>
                </div>
            </div>
            <div class="carousel-item" data-bs-interval="8000">
                <img src="image/home_page/rotation/rotation-5.jpg" class="d-block w-100" alt="...">
                <div class="carousel-caption d-none d-md-block" style="padding: 70px 130px">
                    <h1 style="text-shadow: 0px 1px 3px black;color: #fff;text-align: left;width: 100%;">青城山六善酒店</h1>
                    <p style="text-shadow: 0px 1px 3px black;font-size: 24px; color: #fff;text-align: left;">返璞归真，问道青城，年中倾献，不约可退</p>
                </div>
            </div>
            <div class="carousel-item" data-bs-interval="8000">
                <img src="image/home_page/rotation/rotation-6.jpg" class="d-block w-100" alt="...">
                <div class="carousel-caption d-none d-md-block" style="padding: 0px 0px 288px 130px">
                    <h1 style="text-shadow: 0px 1px 3px black;color: #fff;text-align: left;width: 100%;">普吉岛香缇别墅</h1>
                    <p style="text-shadow: 0px 1px 3px black;font-size: 24px; color: #fff;text-align: left;">坐落在纳泰海滩原始白色沙滩上，享受安达曼海一览无余的景色</p>
                </div>
            </div>
        </div>
        <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleFade" data-bs-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true" style="width: 6rem;height: 6rem;"></span>
            <span class="visually-hidden">Previous</span>
        </button>
        <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleFade" data-bs-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"  style="width: 6rem;height: 6rem;"></span>
            <span class="visually-hidden">Next</span>
        </button>
        <div class="search_box">
            <div class="search_item_box">
                <i class="el-icon-location-outline" style="color: rgb(255, 128, 0);position: absolute;margin-top: 8px;font-size: 23px;margin-left: 15px;"></i>
                <input type="text" class="search_text_box" placeholder="目的地/酒店/别墅/小团">
                <template>
                    <div class="block" style="margin-right: 70px;">
                        <el-date-picker
                                v-model="value1"
                                type="date"
                                placeholder="选择日期">
                        </el-date-picker>
                    </div>
                </template>
                <i class="el-icon-user" style="z-index: 99;color: rgb(255, 128, 0);position: absolute;margin-top: 8px;font-size: 23px;margin-left: 708px;"></i>
                <template>
                    <el-select style="margin-right: 20px;" v-model="value" placeholder="入住人数">
                        <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </template>
                <button class="btn_search">搜索</button>
            </div>
        </div>
    </div>
</div>

<script src="js/title.js"></script>
</body>
</html>